﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/report2.css">
    <link rel="stylesheet" href="../static/css/moniter.css">
    <link rel="stylesheet" href="../static/css/laydate.css">
    <script src="../static/js/laydate.js"></script>
    <title>容智车联车厢管家</title>
    <style>
        .table01-lj table tbody {
            height: 140px;
        }
        .table01-lj {
            height: 192px;
        }
        .map-b-div {
            height: 242px;
        }
        .map-t-div {
            padding-bottom: 254px;
        }
        .table th, .table td {
            padding:2px 8px;

        }
        .table01-lj tr{height:35px;}
        .table01-lj table thead, .table01-lj tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            height: auto;
        }
        .showdiv{padding-top:50px;height:100%;box-sizing:border-box;}
        .displayN{display:none;}
        .pos-ablj{right:150px;}
        .position-r{position:relative;}
        .position-a{position:absolute;}
        .margin-b5{margin-bottom: 5px;}
        .margin-b15{margin-bottom: 15px;}
        .width100{width:100%;}
        .gongshi-box .same-set-int{box-sizing: border-box;height:35px;line-height: 35px;}
        .cover-bg{background: rgba(51, 51, 51, 0.8);
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 10;}
        .gongshi-box{width:260px;height:300px;padding:20px 50px;border-radius: 5px;background: #fff;position:absolute;top:50%;left:50%;margin-left:-130px;margin-top:-160px;}
        .sure-btn{margin-top: 20px;}
        #messionString td:last-child{text-align:left;}
    </style>
</head>
<body class="odd-body">
<div class="position-a cover-bg">
    <div class="gongshi-box">
        <div id="close" style="
            position:  absolute;
            top: -14px;
            right: -14px;
            width: 30px;
            height: 30px;
            background-color: #00a344;
            border-radius:60px;
            background-image: url(../static/images/guanbi.png);
            background-repeat:no-repeat;
            background-position:center center;
            background-size: 30px;
        "></div>
        <div><p class="margin-b5">选择车辆</p><select class="width100 margin-b15 same-set-int" id="scarstring"></select></div>
        <div><p class="margin-b5">开始时间</p><input type="text" id="test1" class="width100 margin-b15 same-set-int"></div>
        <div><p class="margin-b5">结束时间</p><input type="text" id="test2" class="width100 margin-b15 same-set-int"></div>
        <div><button type="button" class="width100 margin-b15 same-set-int sure-btn">确定</button></div>
    </div>
</div>
<div class="container-fluid" style="padding:0">
    <div class="row-fluid">
        <!--------------------------以下是侧边栏---------------------------------->
        <div class="span3  bg-white pad-10 bdradius"  style="width: 20%">
            <div class="height100 pos-re">
                <div class="search-lj" style="overflow:hidden;" >
                    <form class="navbar-search">
                        <input type="text" class="search-query input-medium m-l-25" placeholder="搜索中转站" id="searchStation"/>
                    </form>
                </div>
                <div class="ul-lj">
                    <ul id="vehi-list">
					<#list stationList as station>
                        <li class=" p-bt-10 b-botom pos-re">
                            <a href="javascript:void(0);" title='${station.name!""}（${station.carCount!""}辆）'>
                                <span class="txt-limit getCars" name="${station.id!""}">${station.name!""}（${station.carCount!""}辆）</span>
                            </a>
                            <span class="txt-num"></span>
                            <ul class="carListNumbers">
							<#--<li class=" p-bt-10">粤B3959457</li>
									<li class=" p-bt-10">粤B3959457</li>
									<li class=" p-bt-10">粤B3959457</li>
									<li class=" p-bt-10">粤B3959457</li>
									<li class=" p-bt-10">粤B3959457</li>-->
                            </ul>
                        </li>
					</#list>
                    </ul>
                </div>
            </div>
        </div>
        <!--------------------------以下是右边柱状图---------------------------------->
        <div class="span9 pull-right  pos-re lijia-div" style="overflow-y: hidden;">
            <div class="pos-re height100 width100">
                <div class="map-t-div pos-re height100">
                    <div class="row-fluid height100">
                        <div class="mapdiv height100">
                            <div class="span12 map-zone ov-h bdradius bg-white pos-re" style="height:100%" >
                                <div class="pos-re tabChange" style="height: 50px;line-height: 30px;width: 100%;position:absolute;">
                                    <p class="pad-10 p-l-20 font-w">

                                    </p>
                                    <div class="row pos-ab3 ov-h bdradius pos-ablj" style="cursor:pointer;">
                                        <span class="span6 twin-bg t-c takeout">导出</span>
                                    </div>
                                    <div class="row pos-ab3 ov-h bdradius" style="cursor:pointer;">
                                        <span class="span6 twin-bg t-c">月度</span>
                                        <span class="span6 t-c">年度</span>
                                    </div>
                                </div>
                                <div class="showdiv">
                                    <div class="map-zone2 showmap" id="main" style="height:100%;width: 100%;">
                                        <!--这里是柱状图容器-->
                                    </div>
                                    <div class="map-zone2  showmap" id="main1" style="height:100%;width: 100%;">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid  map-b-div">
                    <div class="span12 bg-white pad-10 bdbox bdradius pos-re"   style="min-height:100%">
                        <h3 class="b-botom">卡车入港信息</h3>
                        <table class="table table-striped" style="
  width:calc(100% - 1em);
  "><colgroup>
                            <col style="width: 18%;">

                            <col style="width: 14%;">

                            <col style="width: 14%;">

                            <col style="width: 14%;">

                            <col style="width: 13%;">

                            <col style="width: 14%;">

                            <col style="width: 13%;">

                        </colgroup>
                            <thead class="font-bold">
                            <tr>
                                <td>任务单编号</td>
                                <td>始发地</td>
                                <td>目的地</td>
                                <td>装载率</td>
                                <td>货物体积</td>
                                <td>装车用时</td>
                                <td>卸车用时</td></tr>
                            </thead>
                        </table>
                        <div class="tbody-div" style="
height: 100px;
overflow-y: scroll;
display: block;
width: 100%;
flex-grow: 1;
">
                            <table class="table table-striped">
                                <colgroup>
                                    <col style="width: 18%;">

                                    <col style="width: 14%;">

                                    <col style="width: 14%;">

                                    <col style="width: 14%;">

                                    <col style="width: 13%;">

                                    <col style="width: 14%;">

                                    <col style="width: 13%;">

                                </colgroup>
                                <tbody id="messionString" style="
    width: 100%;
    ">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/echarts.common.min.js"></script>
<script src="../static/js/task.js"></script>
<script src="../static/js/report2.js"></script>
<script>
    laydate.render({
        elem: '#test1'
    });
    laydate.render({
        elem: '#test2'
    });
    $(function () {

        $('#close').click(function(){
            $('.gongshi-box').hide();
            $('.cover-bg').hide();
        });

        $('.takeout').on('click',function(){
            $('.cover-bg').show();
            //通过clientId获取车辆列表
            //ajax start
            $.ajax({
                type: "POST",
                url: "../car/getCarsByClient",
                dataType : 'json',
                success: function(data){
                    $('#scarstring').html(data.msg);
                }
            });
            //ajax end
        })
        $('.sure-btn').on('click',function(){
            $('.cover-bg').hide();

            var carno = $('#scarstring').val();

            var ctime = $('#test1').val();
            var etime = $('#test2').val();

            location.href = "../report/exportReport?carno="+carno+"&cTime="+ctime+"&etime="+etime;



        });
       


        $(document).on('click','.getCars',function(){
            var stationId = $(this).attr('name');
//            alert(stationId);
            $.ajax({
                type: "POST",
                url: "../car/getCarListByStationId",
                dataType:'json',
                data:{
                    "stationId":stationId
                },
                success:function(data){
                    if(data.status == "success")
                    {
                        var carString = data.msg;
//                        alert(carString);
                        $('.carListNumbers').html(carString);
                    }
                    else {
//                        alert(1111);
                    }
                }
            });

        });


        /**
         * 搜索触发事件
         */
        $("#searchStation").keyup(function(){
            var text = $(this).val();
//            alert(text);
            $.ajax({
                type: "POST",
                url: "../station/getStationByKey",
                dataType:'json',
                data:{
                    "text":text
                },
                success:function(data){
                    if(data.status == "success")
                    {

                        var str = data.stationList;
                        $('#vehi-list').html(str);
                    }
                    else {
//                        alert(1111);
                    }
                }
            });
        });
    })
</script>
</body>
</html>
